<template>
	<uni-list style="width: 100%">
		<div ref="contactItem" class="contact-item">
			<uni-list style="width: 100%">
				<view v-for="user in userData" :key="user.uid">
					<div class="content" :name="'user-' + user.uid" :style="paddingStyle" @click.stop="clickUserItem(user)">
						<img class="avatar" :src="user.portrait || $avatar" alt="" @error="imgUrlAlt" />
						<div style="padding-left: 10px">
							<p class="single-line">{{ user._displayName ? user._displayName : user.displayName }}</p>
							<p v-if="user._userOnlineStatusDesc" class="single-line user-online-status">
								{{ user._userOnlineStatusDesc }}
							</p>
						</div>
					</div>
				</view>
			</uni-list>
		</div>
	</uni-list>
</template>

<script>
	import store from '../../store'
	import UserCardView from './UserCardView'
	import Config from '../../config'
	import UniList from '../../components/uni-list/uni-list.vue'

	export default {
		name: 'OrgUserListView',
		props: {
			users: {
				type: Array,
				required: false
			},
			currentUser: {
				type: Object,
				default: null
			},
			showCategoryLabel: {
				type: Boolean,
				required: false,
				default: true
			},
			enableCategoryLabelSticky: {
				type: Boolean,
				required: false,
				default: false
			},
			clickUserItemFunc: {
				type: Function,
				required: false
			},
			paddingLeft: {
				type: String,
				required: false,
				default: '5px'
			}
		},
		data() {
			return {
				sharedContactState: store.state.contact,
				userData: [
					// {
					// 	uid: 'dagqmws2k',
					// 	name: 'b4d3e5d8-e985-46ec-abc0-ba46f2a15eb0',
					// 	displayName: '超管',
					// 	groupAlias: '',
					// 	friendAlias: '',
					// 	gender: 0,
					// 	portrait:
					// 		'',
					// 	mobile: '67aa58eefe945157842f2ea0230c01b0',
					// 	email: '123@qq.com',
					// 	address: '',
					// 	social: '',
					// 	extra: '',
					// 	type: 0,
					// 	deleted: 0,
					// 	updateDt: 1683809899796,
					// 	company: '',
					// 	_displayName: '超管',
					// 	_pinyin: 'hucunzhen',
					// 	__sortPinyin: 'ahucunzhen',
					// 	_firstLetters: 'hcz',
					// 	_category: 'h',
					// 	_userOnlineStatusDesc: ''
					// },
					// {
					// 	uid: 'nggqmws2k',
					// 	name: 'dc535ca1-62dd-4352-afb8-dafcd03b97ea',
					// 	displayName: 'liujiaxin5',
					// 	groupAlias: '',
					// 	friendAlias: '',
					// 	gender: 0,
					// 	portrait:
					// 		'',
					// 	mobile: '0a467d7b632235cfa2d20bb0451cd70e',
					// 	email: '22@qq.com',
					// 	address: '',
					// 	social: '',
					// 	extra: '',
					// 	type: 0,
					// 	deleted: 0,
					// 	updateDt: 1683898271839,
					// 	company: '',
					// 	_displayName: 'liujiaxin5',
					// 	_pinyin: 'liujiaxin5',
					// 	__sortPinyin: 'aliujiaxin5',
					// 	_firstLetters: 'liujiaxin5',
					// 	_category: 'l',
					// 	_userOnlineStatusDesc: ''
					// },
					// {
					// 	uid: 'FireRobot',
					// 	name: 'FireRobot',
					// 	displayName: '小火',
					// 	groupAlias: '',
					// 	friendAlias: '',
					// 	gender: 0,
					// 	portrait: 'http://cdn2.wildfirechat.cn/robot.png',
					// 	mobile: '',
					// 	email: '',
					// 	address: '',
					// 	social: '',
					// 	extra: '',
					// 	type: 1,
					// 	deleted: 0,
					// 	updateDt: 1,
					// 	company: '',
					// 	_displayName: '小火',
					// 	_pinyin: 'xiaohuo',
					// 	__sortPinyin: 'axiaohuo',
					// 	_firstLetters: 'xh',
					// 	_category: 'x',
					// 	_userOnlineStatusDesc: ''
					// },
					// {
					// 	uid: 'zjgqmws2k',
					// 	name: 'PSEVQRB0',
					// 	displayName: '用户95',
					// 	groupAlias: '',
					// 	friendAlias: '',
					// 	gender: 0,
					// 	portrait:
					// 		'',
					// 	mobile: '123',
					// 	email: '',
					// 	address: '',
					// 	social: '',
					// 	extra: '',
					// 	type: 0,
					// 	deleted: 0,
					// 	updateDt: 1683192617249,
					// 	company: '',
					// 	_displayName: '用户95',
					// 	_pinyin: 'yonghu95',
					// 	__sortPinyin: 'ayonghu95',
					// 	_firstLetters: 'yh95',
					// 	_category: 'y',
					// 	_userOnlineStatusDesc: ''
					// }
				]
			}
		},
		methods: {
			init(deptId) {
				let userInfo = uni.getStorageSync('userInfoH5')
				let data = {
					method: 'get',
					url: 'http://175.44.138.53:1301/wpd-sanming/system/user/list',
					data: { deptId: deptId, current: 1, size: 999 },
					header: {
						Authorization: 'Bearer ' + userInfo.access_token
					},
					success: (data) => {
						console.info(`data:`, data)
						let list = data.data.data.map((el) => {
							el.mobile = el.phone
							el.uid = el.imId
							el.displayName = el.nickName
							el._displayName = el.nickName
							el.gender = 0
							el.name = el.id
							el.extra = el.deptName
							return el
						})
						this.userData = list
					}
				}
				uni.request(data)
			},
			clickUserItem(user) {
				if (this.clickUserItemFunc) {
					this.clickUserItemFunc(user)
				} else {
					store.setCurrentFriend(user)
					uni.navigateTo({
						url: '/pages/contact/UserDetailPage',
						success: () => {
							console.log('nav to UserDetailPage success')
						},
						fail: (err) => {
							console.log('nav to UserDetailPage err', err)
						}
					})
				}
			},

			scrollActiveElementCenter() {
				let el = this.$el.getElementsByClassName('active')[0]
				el && el.scrollIntoView({ behavior: 'instant', block: 'center' })
			},

			imgUrlAlt(e) {
				e.target.src = Config.DEFAULT_PORTRAIT_URL
			}
		},

		mounted() {},

		activated() {
			this.scrollActiveElementCenter()
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.data))
			console.info(`data:`, data)
			this.init(data.id)
		},

		destroyed() {},

		computed: {
			paddingStyle() {
				return {
					paddingLeft: this.paddingLeft
				}
			}
		},
		components: {
			UniList,
			UserCardView
		}
	}
</script>

<style lang="less" scoped>
	.contact-item {
		--user-item-padding-left: 30px;
	}

	ul {
		list-style: none;
		width: 100%;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 3px;
	}

	.checkbox {
		margin-right: 10px;
	}

	.contact-item {
		display: flex;
		flex-direction: column;
		font-size: 13px;
		align-items: flex-start;
	}

	.contact-item .label {
		width: 100%;
		background-color: #fafafa;
	}

	.contact-item .label p {
		padding: 5px 5px 5px 0;
		border-bottom: 1px solid #e0e0e0;
	}

	.contact-item .label.sticky {
		position: sticky;
		top: 0;
	}

	.contact-item .content {
		padding: 5px 5px 5px 0;
		display: flex;
		width: 100%;
		align-items: center;
	}

	.contact-item .content span {
		margin-left: 10px;
	}

	.contact-item .content.active {
		background-color: #d6d6d6;
	}

	.contact-item .content:active {
		background-color: #d6d6d6;
	}

	.user-online-status {
		color: gray;
		font-size: 10px;
	}

	/*.contact-item .content:hover {*/
	/*  background-color: red;*/
	/*}*/
</style>
